<template>
    <div class="category">
      <h3>{{title}}</h3>

<!--      定义一个插槽（挖个坑，）-->
<!--      传给了 插槽的使用者-->
        <slot :games="games"></slot>

    </div>

</template>

<script>

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  props:['listData','title'],
  data() {
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
    }
  },

}
</script>

<style scoped>
  .category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
    text-align: center;
    background-color: orange;
  }
</style>